function UI_DataRenderer(id, rootID){ //rootID = del div que contiene al panel
	
	
	var _domElement = $("#"+id).css({'background-color': 'infotext', 'color' : '#fff',  'white-space':'nowrap'});
	var _domRootPanelElement = $("#"+rootID);
	
	var visible = $(_domRootPanelElement).css('display') != 'none';
	
	this.isVisible = function(){
	//	visible = $(_domRootPanelElement).css('display') != 'none';
		return visible;	
	};
	
	this.data = function(innerHTML){
		$(_domElement).html(innerHTML);
		
		var bool = $(_domRootPanelElement).width() + $(_domRootPanelElement).position().left  ;
		if (bool > $("#map").width()){
			var left = $("#map").width() - $(_domRootPanelElement).width() - 10;
			$(_domRootPanelElement ).css("left", left + "px");
		}
	}
	
	this.append = function(innerHTML){
		$(_domElement).append(innerHTML);
		
		var bool = $(_domRootPanelElement).width() + $(_domRootPanelElement).position().left  ;
		if (bool > $("#map").width()){
			var left = $("#map").width() - $(_domRootPanelElement).width() - 10;
			$(_domRootPanelElement ).css("left", left + "px");
		}
	}
	
	this.toggle = function(){
		visible = $(_domRootPanelElement).css('display') != 'none';
		if (visible){$( _domRootPanelElement).hide();}
		else{$( _domRootPanelElement).show();}
		visible = !visible;
	};
	
	
	$("#btnCerrarPanelDataRenderer").click(function(event){
		visible = false;
		$(_domRootPanelElement).hide();
	});
	
	
	$( _domRootPanelElement).draggable({ cursor: 'pointer', /*containment: 'parent'*/ });
	
	var left = $("#map").width() - $(_domRootPanelElement).width() /*- 10*/;
	$(_domRootPanelElement ).css("left", left + "px");
	$(_domRootPanelElement ).css('top', 125);
	
};